<template>
<Card>
    <div class="box-width">
        <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
            <FormItem label="课程名称" prop="course">
                <div>101-设计方向-专业阶段-UI设计基础</div>
            </FormItem>
            <FormItem label="题干" prop="title">
                <Input v-model="formValidate.title" placeholder="输入题干"></Input>
            </FormItem>
            <FormItem label="单元" prop="unitnum">
                <Select v-model="formValidate.unitnum" placeholder="选择单元">
                    <!-- <Option  v-for="item in unitArr"  :value="item" :key="item">第{{item}}单元</Option> -->
                    <Option v-for="item in unitList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                </Select>
            </FormItem>
            <FormItem label="单元名称" prop="unit">
                <Input v-model="formValidate.unit" placeholder="例如：设计原则与命名规范"></Input>
            </FormItem>
            <FormItem label="题型" prop="type">
                <RadioGroup v-model="formValidate.type">
                    <Radio label="1">单选题</Radio>
                    <Radio label="2">多选题</Radio>
                    <Radio label="3">填空题</Radio>
                    <Radio label="4">简答题</Radio>
                </RadioGroup>
            </FormItem>
            <FormItem label="标记" prop="mark">
                <CheckboxGroup v-model="formValidate.mark">
                    <Checkbox label="高频"></Checkbox>
                    <Checkbox label="高难"></Checkbox>
                    <Checkbox label="置顶"></Checkbox>
                </CheckboxGroup>
            </FormItem>
            <FormItem label="答案" prop="answer">
                <Input v-model="formValidate.answer" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="写入正确答案"></Input>
            </FormItem>
            <FormItem>
                <Button type="primary" @click="handleSubmit('formValidate')">保存</Button>
                <Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>
            </FormItem>
        </Form>
    </div>
</Card>
</template>
<script>
    import API from '../../api/api_kaoti.js';
    export default {
        data () {
            return {
                unitList: [
                    {
                        value: '1',
                        label: '第一单元'
                    },
                    {
                        value: '2',
                        label: '第二单元'
                    },
                    {
                        value: '3',
                        label: '第三单元'
                    },
                    {
                        value: '4',
                        label: '第四单元'
                    },
                    {
                        value: '5',
                        label: '第五单元'
                    },
                    {
                        value: '6',
                        label: '第六单元'
                    },
                    {
                        value: '7',
                        label: '第七单元'
                    },
                    {
                        value: '8',
                        label: '第八单元'
                    },
                    {
                        value: '9',
                        label: '第九单元'
                    },
                    {
                        value: '10',
                        label: '第十单元'
                    },
                    {
                        value: '11',
                        label: '第十一单元'
                    },
                    {
                        value: '12',
                        label: '第十二单元'
                    },
                    {
                        value: '13',
                        label: '第十三单元'
                    },
                    {
                        value: '14',
                        label: '第十四单元'
                    },
                    {
                        value: '15',
                        label: '第十五单元'
                    },
                    {
                        value: '16',
                        label: '第十六单元'
                    },
                    {
                        value: '17',
                        label: '第十七单元'
                    },
                    {
                        value: '18',
                        label: '第十八单元'
                    },
                    {
                        value: '19',
                        label: '第十九单元'
                    },
                    {
                        value: '20',
                        label: '第二十单元'
                    }],
                formValidate: {
                    cid:101,
                    direction:'设计方向',
                    stage:'专业阶段',
                    course: 'UI设计基础',
                    title: '',
                    mark: [],
                    type:1,
                    unit:'',
                    unitnum: 1,
                    answer: 'a'
                },
                ruleValidate: {
                    title: [
                        { required: true, message: '题干不能为空', trigger: 'blur' }
                    ],
                    type:[
                        { required: true, message: '请选择类型', trigger: 'change' }
                    ],
                    unitnum: [
                        { required: true, message: '请选择单元', trigger: 'change' }
                    ],
                    unit: [
                        { required: true, message: '单元名称不能为空', trigger: 'change' }
                    ],
                    answer: [
                        { required: true, message: '请输入答案', trigger: 'blur' },
                        { type: 'string', min: 1, message: '答案不正确', trigger: 'blur' }
                    ]
                }
            }
        },
        methods: {
            handleSubmit (name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        // this.$Message.success('成功!');
                        this._submitForm();
                    } else {
                        // this.$Message.error('失败!');
                    }
                })
            },
            _submitForm(){
                API.add(this.formValidate).then((res)=>{
                    this.$Message.success(res.msg);
                })
            },
            handleReset (name) {
                this.$refs[name].resetFields();
            }
        }
    }
</script>
<style scoped>
.box-width{
    width:600px;
}
</style>
